<template>
  <h1>Vue3</h1>
  <h1>父组件上的钱：{{ money }}</h1>
  <Son :money="money" @pay-money="payMoneyFn"></Son>
</template>

<script>
/* 
  目标：
*/
import { provide, ref } from 'vue'
import Son from './components/Son.vue'
export default {
  name: 'App',
  components: { Son },
  setup() {
    const money = ref(10000)

    // 🔔 provide 函数提供的数据可以所有子孙后代组件访问到(通过inject函数访问)
    // provide('key', value)
    // 🎉提供响应式数据给后代组件使用
    provide('money',money)

    const payMoneyFn = (val) => {
      money.value -= val
    }
     // 🎉提供修改函数给后代使用
     provide('payMoneyFn',payMoneyFn)

    return { money,payMoneyFn }
  },
}
</script>